<template>
  <div class="potential-analysis">
    <!-- 综合仪表板 -->
    <div class="mb-6">
      <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 relative">
          <!-- 问号图标 -->
          <div class="absolute top-2 right-2">
            <el-tooltip content="基于各科目的当前成绩、学习能力和投入时间计算得出的最具提升潜力的科目，建议优先重点学习" placement="top" effect="dark" :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-green-400 cursor-pointer hover:text-green-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
          <div class="flex items-center">
            <div class="i-mdi:trending-up w-6 h-6 text-green-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">最高潜力科目</div>
              <div class="text-xl font-bold text-green-600">{{ topPotentialSubject }}</div>
            </div>
          </div>
        </div>
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 relative">
          <!-- 问号图标 -->
          <div class="absolute top-2 right-2">
            <el-tooltip content="通过分析各科目的潜力评分和当前成绩差距，预测在合理学习投入下能够获得的总提分空间" placement="top" effect="dark" :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-blue-400 cursor-pointer hover:text-blue-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
          <div class="flex items-center">
            <div class="i-mdi:target w-6 h-6 text-blue-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">预期总提分</div>
              <div class="text-xl font-bold text-blue-600">{{ totalExpectedImprovement }}分</div>
            </div>
          </div>
        </div>
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 relative">
          <!-- 问号图标 -->
          <div class="absolute top-2 right-2">
            <el-tooltip content="根据各科目的潜力评分和难度系数，结合学习效率建议的每周总学习时间，确保学习效果最大化" placement="top" effect="dark" :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-purple-400 cursor-pointer hover:text-purple-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
          <div class="flex items-center">
            <div class="i-mdi:clock-outline w-6 h-6 text-purple-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">建议学习时间</div>
              <div class="text-xl font-bold text-purple-600">{{ totalStudyHours }}小时/周</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提分潜力排行榜 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">提分潜力排行榜</h3>
      <el-table :data="sortedSubjects" stripe class="w-full">
        <el-table-column label="排名" width="80" align="center">
          <template #default="{ $index }">
            <div class="flex items-center justify-center">
              <div v-if="$index < 3" class="w-6 h-6 rounded-full flex items-center justify-center text-white text-sm font-bold"
                :class="getRankColor($index)">
                {{ $index + 1 }}
              </div>
              <span v-else class="text-gray-500">{{ $index + 1 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="科目">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="i-mdi:trending-up w-4 h-4 text-green-500 mr-2"></div>
              <span class="font-medium">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="potentialScore" label="潜力评分">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-progress :percentage="row.potentialScore * 10" :color="getPotentialColor(row.potentialScore)" :stroke-width="8" class="w-16 mr-2" />
              <span class="font-bold text-green-600">{{ row.potentialScore }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="currentScore" label="当前分数">
          <template #default="{ row }">
            <span class="text-gray-600">{{ row.currentScore }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expectedImprovement" label="预期提分">
          <template #default="{ row }">
            <span class="font-bold text-green-600">+{{ row.expectedImprovement }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="timeInvestment" label="时间投入">
          <template #default="{ row }">
            <el-tag :type="getTimeInvestmentTagType(row.timeInvestment)" size="small">
              {{ getTimeInvestmentText(row.timeInvestment) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewPlan(row)">
              查看计划
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 预期提分效果预测 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">预期提分效果预测</h3>
      <div class="bg-gray-50 rounded-lg p-6 h-64 flex items-center justify-center">
        <div class="text-center text-gray-500">
          <div class="i-mdi:chart-bar w-16 h-16 mx-auto mb-2"></div>
          <p>预期提分效果预测图</p>
          <p class="text-sm">展示各科目提分后的预期效果和排名变化</p>
        </div>
      </div>
    </div>

    <!-- 学习时间分配建议 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">学习时间分配建议</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-4 text-gray-800">时间分配比例</h4>
          <div class="space-y-3">
            <div v-for="subject in top3Subjects" :key="subject.name" class="flex items-center">
              <div class="w-20 text-sm text-gray-600">{{ subject.name }}</div>
              <div class="flex-1 mx-3">
                <el-progress :percentage="getTimePercentage(subject)" :color="getSubjectColor(subject.name)" :stroke-width="12" />
              </div>
              <div class="w-16 text-sm font-medium text-gray-800">
                {{ getTimePercentage(subject) }}%
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-4 text-gray-800">学习重点建议</h4>
          <div class="space-y-3">
            <div v-for="subject in top3Subjects" :key="subject.name" class="border-l-4 pl-3" :class="getSubjectBorderColor(subject.name)">
              <div class="font-medium text-gray-800 mb-1">{{ subject.name }}</div>
              <div class="text-sm text-gray-600">
                <div>预期提分：<span class="font-medium text-green-600">+{{ subject.expectedImprovement }}分</span></div>
                <div>建议时间：<span class="font-medium">{{ getStudyHours(subject) }}小时/周</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 个性化学习计划 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">个性化学习计划</h3>
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start mb-3">
          <div class="i-mdi:calendar-clock w-5 h-5 text-blue-500 mr-2 mt-0.5"></div>
          <h4 class="font-medium text-blue-800">详细学习计划</h4>
        </div>
        <div class="space-y-4">
          <div v-for="(plan, subject) in potentialData.studyPlan" :key="subject" class="bg-white rounded-lg p-4 border border-blue-100">
            <div class="flex items-center justify-between mb-3">
              <h5 class="font-medium text-gray-800">{{ getSubjectName(subject) }}</h5>
              <el-tag type="primary" size="small">{{ plan.hoursPerWeek }}小时/周</el-tag>
            </div>
            <div class="text-sm text-gray-600">
              <div class="font-medium mb-2">重点学习方向：</div>
              <div class="flex flex-wrap gap-2">
                <el-tag v-for="area in plan.focusAreas" :key="area" size="small" type="info">
                  {{ area }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习建议 -->
    <div>
      <h3 class="text-lg font-semibold mb-4">学习建议</h3>
      <div class="bg-green-50 border border-green-200 rounded-lg p-4">
        <div class="flex items-start mb-3">
          <div class="i-mdi:lightbulb w-5 h-5 text-green-500 mr-2 mt-0.5"></div>
          <h4 class="font-medium text-green-800">优化学习策略</h4>
        </div>
        <ul class="space-y-2">
          <li v-for="(recommendation, index) in potentialData.recommendations" :key="index" class="flex items-start">
            <div class="i-mdi:check-circle w-4 h-4 text-green-500 mr-2 mt-0.5"></div>
            <span class="text-green-700">{{ recommendation }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义props
const props = defineProps({
  potentialData: {
    type: Object,
    required: true
  }
})

// 计算属性
const sortedSubjects = computed(() => {
  return [...props.potentialData.subjects].sort((a, b) => b.potentialScore - a.potentialScore)
})

const topPotentialSubject = computed(() => {
  return sortedSubjects.value[0]?.name || '无'
})

const totalExpectedImprovement = computed(() => {
  return props.potentialData.subjects.reduce((sum, subject) => sum + subject.expectedImprovement, 0)
})

const totalStudyHours = computed(() => {
  return Object.values(props.potentialData.studyPlan).reduce((sum, plan) => sum + plan.hoursPerWeek, 0)
})

const top3Subjects = computed(() => {
  return sortedSubjects.value.slice(0, 3)
})

// 方法
const getRankColor = (index) => {
  const colors = ['bg-yellow-500', 'bg-gray-400', 'bg-orange-500']
  return colors[index] || 'bg-gray-300'
}

const getPotentialColor = (score) => {
  if (score >= 8) return '#10b981' // 绿色
  if (score >= 6) return '#f59e0b' // 橙色
  return '#ef4444' // 红色
}

const getTimeInvestmentTagType = (investment) => {
  switch (investment) {
    case 'high': return 'danger'
    case 'medium': return 'warning'
    case 'low': return 'success'
    default: return 'info'
  }
}

const getTimeInvestmentText = (investment) => {
  switch (investment) {
    case 'high': return '高投入'
    case 'medium': return '中投入'
    case 'low': return '低投入'
    default: return '未知'
  }
}

const getTimePercentage = (subject) => {
  const totalHours = totalStudyHours.value
  const subjectHours = props.potentialData.studyPlan[subject.name.toLowerCase()]?.hoursPerWeek || 0
  return totalHours > 0 ? Math.round((subjectHours / totalHours) * 100) : 0
}

const getSubjectColor = (subjectName) => {
  const colors = {
    '数学': '#ef4444',
    '物理': '#f59e0b',
    '化学': '#10b981',
    '英语': '#3b82f6',
    '语文': '#8b5cf6',
    '生物': '#06b6d4'
  }
  return colors[subjectName] || '#6b7280'
}

const getSubjectBorderColor = (subjectName) => {
  const colors = {
    '数学': 'border-red-500',
    '物理': 'border-orange-500',
    '化学': 'border-green-500',
    '英语': 'border-blue-500',
    '语文': 'border-purple-500',
    '生物': 'border-cyan-500'
  }
  return colors[subjectName] || 'border-gray-500'
}

const getStudyHours = (subject) => {
  return props.potentialData.studyPlan[subject.name.toLowerCase()]?.hoursPerWeek || 0
}

const getSubjectName = (subjectKey) => {
  const nameMap = {
    'math': '数学',
    'physics': '物理',
    'chemistry': '化学'
  }
  return nameMap[subjectKey] || subjectKey
}

const viewPlan = (subject) => {
  console.log('查看计划:', subject.name)
  // 这里可以添加查看详细学习计划的逻辑
}
</script>

<style lang="scss" scoped>
.potential-analysis {
  .el-table {
    .el-table__header {
      background-color: #f8fafc;
    }
  }

  .help-icon {
    transition: all 0.2s ease;
    &:hover {
      transform: scale(1.1);
    }
  }

  .bg-green-50,
  .bg-blue-50,
  .bg-purple-50 {
    transition: all 0.3s ease;
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 